
<!--购买页面-->

<template>
  <div class="body">
    <catshit-header></catshit-header>
    <div class="main">
      <div class="up">
        <div style="width: 20%">
          <img src="../../../assets/images/liuduo.jpg">
        </div>
        <div style="width: 80%;justify-content: left">
          <div style="justify-content: space-between;width: 85%">
            <div style="display: flex;justify-content: space-between">
              <h1>{{filmName}}</h1>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>

      <el-card>
        <div slot="header">
          <h4>购票</h4>
        </div>
        <el-table
          :data="testList"
          stripe
          style="width:100%">
          <el-table-column
            label="时间"
            prop="batchdate">
          </el-table-column>
          <el-table-column
            label="票余量"
            prop="resttic">
          </el-table-column>
          <el-table-column
            label="总票数"
            prop="ticnum">
          </el-table-column>
          <el-table-column
            label="购票">
            <template slot-scope="scope">
              <!--放映厅、场次-->
              <el-button @click="purchase(scope.row.batchid)">购票</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
  </div>
</template>

<script>
  import CatshitHeader from "../../../components/CatshitHeader";
  import Cookies from 'js-cookie'
  export default {
    name: "Purchase",
    components: {CatshitHeader},
    data(){
      return{
        /*query input film name*/
        filmName:'',
        /*film ticket set list*/
        ticketList:[],
        testList:[
          {
            show_times:'',
            amount_left:'',
            amount_sum:'',
            open_time:'',
            video_hall:'',
          }
        ],
        userid:Cookies.get('user_id')
      }
    },
    created() {
      this.filmID = this.$route.query.filmID;
    },
    watch: {
      $route (to, from) {
        this.$router.go(0)
      }
    },
    mounted() {
      this.getTicket()
    },
    methods:{
      async getTicket(){
        this.$axios.post('/getbatchlist', {spotid:this.filmID}).then(res=>{
          console.log(res,2222)
          if(res.data.code){
            this.$message.error('出错')
            return
          }
          this.testList=res.data.msg
        })
      },
      purchase(id){
        let data={
          username:this.userid,
          batchid:id
        }
        this.$axios.post('/getticket', data,).then((res) => {
          // console.log(res,2222)
          if (res.data.code) {
           this.$message.error(res.data.msg)
            return
          }
          this.getTicket()
          this.$message.info('购票成功')
        })
      }
    }
  }
</script>

<style scoped>
  .body{
    display: flex;
    background-color: aliceblue;
    justify-content: center;
  }
  .main{
    margin-top: 60px;
    width: 70%;
    background-color: white;
  }
  .up{
    padding: 50px;
    display: flex;
    align-items: center;
  }
</style>
